const log = console.log.bind(console, '>>>')
String.prototype.replaceAll = function (s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}
let container = document.querySelector('.container')
// 初始化 query 获取地址参数
let initQuery = function(params) {
    let queryArray = location.href.split('?')[1].split('&')
    let o = {}
    for (const query of queryArray) {
        let q = query.split('=')
        o[q[0]] = q[1]
    }
    return o
}
// 选择题选项模板
let optionTemplate = function(val) {    
    let order = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    var template = ''            
    var params = JSON.parse(val.qoptjson)
    for (let index = 0; index < params.length; index++) {
        const element = params[index];        
        let t = `
                <div class="option qcols${val.qcols}">
                    <div class="order">${order[index]}.</div>
                    <div class="select">${element}</div>
                </div>
            `
        template = template + t
    }
    return template
}

// 选择题模板
let selectTemplate = function(order, val) {
    // log('选择题模板', val)
    var title = val.partTwo
    var options = optionTemplate(val)
    let template = `
        <div class="relative choice">
            <div class="q-title ">
               <span class="p1 order">${order}.</span>${title}
            </div>
            <div class="options">
             ${options}
            </div>
            <div class="icons flex">
                <div class="flex video ${val.hasVideo === true ? 'hasVideo' : ''}" >
                    <div class="icon "><img src="./images/watchVideo.png" alt=""></div>
                    <div class="text">视频讲解</div>
                </div>
                <div class="flex anwserButton">
                    <div class="icon"> <img src="./images/answer.png" alt=""></div>
                    <div class="text"> 答案 </div>
                </div>
                </div>  
                <div class="anwser hidden">参考答案: ${val.correctAnswer}</div>
            <div class="line"></div>    
        </div>        
        `
    return template
}

//  除选择题外的模板
let otherTemplate = function(order, val) {
    // log('其他模板', val)
    let template = `
            <div class="question relative">
                <div> 
                    <span class="p1 order">${order}.</span>${val.partTwo}
                </div>
                <div class="icons flex">
                    <div class = "flex video ${val.hasVideo === true ? 'hasVideo' : ''}">
                        <div class="icon "><img src="./images/watchVideo.png" alt=""></div>
                        <div class="text">视频讲解</div>
                    </div>
                    <div class="flex anwserButton">
                        <div class="icon"> <img src="./images/answer.png" alt=""></div>
                        <div class = "text "> 答案 </div>
                    </div>
                </div> 
                <div class="anwser hidden">参考答案: ${val.correctAnswer}</div>
                <div class="line"></div>
            </div>
    `
    return template

}
// 测试模板
var mianTemplate = function(questList, t) {
    // log('result', t)
    let template = `
       <div class="question-container">
            <div class="question relative">
                <div class="type">
                <div class="type-tip"></div>
                <div class="type-title">${questList.type}</div>
            </div>
        <div>
        <div>${t}</div>
    `
    container.insertAdjacentHTML('beforeend', template)
    // return template
}

// 请求试卷详情
let getQuestions = function(params) {
    // let url = 'http://192.168.1.130:8878/admin/youhua/testpaper/searchQuest'
    // let data = initQuery()
    let url = 'http://test.member.i3ke.com/admin/youhua/testpaper/searchQuest'
    let data = {
        vbookid: 30
    }
    return $.post(url, data, )
}

let clickShowAnwser = function() {        
    $('.container').on('click', '.anwserButton', (event) => {        
        let correctIndex = 1
        var target = $(event.target);
        log('被点击的元素 ', target)
        let anwser  = target.parent().parent()
        // 判断是否为选择题, 如果是选择题 
        if ($(target)[0].nodeName == 'IMG') {
            anwser = anwser.parent()
        }
        anwser = anwser.siblings()        
        // correctIndex 改为含有 'anwser' 的 下标
        for (let index = 0; index < anwser.length; index++) {
            const element = anwser[index];            
            if ($(element).hasClass('anwser')) {
                correctIndex = index
            }
        }
        let isHidden = $(anwser[correctIndex]).hasClass('hidden')
        log('isHidden', isHidden)  
        if (isHidden === true) {            
            $(anwser[correctIndex]).removeClass('hidden')
            log('remove')
        } else {
            $(anwser[correctIndex]).addClass('hidden')
            log('add')
        }
    })
}

const __main = function(params) {
    getQuestions().then((res) => {
        log('res', res)        
        let r = res.data
        // 替换标题
        $('.page-title').html(r.bookname)
        //  循环插入文本        
        for (let i = 0; i < r.questList.length; i++) {
            const questList = r.questList[i];
            var order = 1
            var result = ''
            for (let index = 0; index < questList.questListChild.length; index++) {
                const q = questList.questListChild[index];
                if (q.qtype == '选择题') {
                    result += selectTemplate(order, q)
                } else if (q.qtyep != "选择题") {
                    result += otherTemplate(order, q)
                }
                order++
            }
            mianTemplate(questList, result)
        }
    })
    clickShowAnwser()

}
__main()